<template>
	<div>
		<button class="return" @click="backHome">
			<svg
				t="1666961452971"
				class="icon"
				viewBox="0 0 1024 1024"
				version="1.1"
				xmlns="http://www.w3.org/2000/svg"
				p-id="2943"
				width="20"
				height="20">
				<path
					d="M73.142857 490.569143L565.248 1024l95.085714-96.548571-320.512-343.332572 611.035429 1.462857v-146.285714H317.732571l344.649143-344.795429L565.248 0z"
					p-id="2944"
					fill="#ffffff"></path>
			</svg>
		</button>
		<!-- <FormScore></FormScore> -->
		<div class="hello">
			<p>项目地址：https://gitee.com/Su_ge/cdhp</p>
			<p>开发人员：董羽栗，胡欢，庞洲，陈奕赫</p>
			<p>联系我们：U200000000@hust.edu</p>
			<p class="suggestion">
				跟我们提提建议：
				<!-- <textarea
					type="textarea"
					class="input"
					placeholder="请输入你的建议~"
					autocomplete="off"></textarea> -->
				<!-- <button class="button" onclick="open">提交</button> -->
				<el-input
					type="textarea"
					:rows="4"
					placeholder="请输入你的建议~"
					v-model="textarea"
					class="suggestionTextarea">
				</el-input>
				<el-button type="button" @click="open">提交建议</el-button>
			</p>
		</div>
	</div>
</template>

<script>
	// import FormScore from './FormScore';

	export default {
		name: 'AuthorName',
		data() {
			return {
				textarea: '',
			};
		},
		components: {
			// FormScore,
		},
		props: {
			msg: String,
		},
		methods: {
			backHome() {
				this.$router.push({
					name: 'homepage',
				});
			},
			open() {
				if (this.textarea === '') {
					this.$message({
						type: 'info',
						message: '建议不能为空哦~',
					});
					return;
				}
				this.textarea = '';
				this.$message({
					type: 'success',
					message: '提交成功！',
				});
				// this.$alert('确定提交', '提交建议', {
				// 	confirmButtonText: '确定',
				// 	callback: (action) => {
				// 		this.$message({
				// 			type: 'info',
				// 			message: `action: ${action}`,
				// 		});
				// 	},
				// });
			},
		},
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.formScore {
		position: absolute;
		z-index: 10000;
	}
	button {
		cursor: pointer;
	}
	.return {
		position: fixed;
		top: 20px;
		left: 30px;
		font-size: 20px;
		font-weight: bolder;
		padding: 8px 15px 5px 15px;
		border: none;
		background-color: #8f7a66;
		border-radius: 15%;
		color: white;
	}
	.hello p {
		padding: 20px;
	}

	.suggestion {
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;
	}
	.suggestionTextarea {
		width: 400px;
		margin: 20px;
	}
	.input {
		width: 300px;
		height: 200px;
		margin: 20px;
	}

	.button {
		padding: 15px 40px;
		border: none;
		background-color: #8f7a66;
		border-radius: 5%;
		color: white;
	}

	h3 {
		margin: 40px 0 0;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #42b983;
	}
</style>
